<!--
 * @Author: your name
 * @Date: 2021-03-31 14:48:33
 * @LastEditTime: 2021-04-06 17:38:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /fytsoa_3.1/admin/src/components/tinymce-editor/tinymce-editor.vue
-->
<template>
  <div>
    <!--
        给editor加key是因为给tinymce keep-alive以后组件切换时tinymce编辑器会显示异常，
        在activated钩子里改变key的值可以让编辑器重新创建
      -->
    <editor
      id="tinymceEditor"
      :key="tinymceFlag"
      v-model="myValue"
      :init="tinymceInit"
    ></editor>
    <!-- <Upload
      ref="imageUpload"
      multiple
      action="//jsonplaceholder.typicode.com/posts/"
      :on-success="insertImage"
      style="display: none"
    ></Upload> -->
    <fileManager ref="manager" @complete="onComplete"></fileManager>
  </div>
</template>
<script>
  import { baseURL } from '@/config'
  import tinymce from 'tinymce/tinymce'
  import 'tinymce/themes/silver/theme'
  import 'tinymce/skins/ui/oxide/skin.css'
  import 'tinymce/icons/default/icons'
  import vueEditor from '@tinymce/tinymce-vue'
  import 'tinymce/plugins/textcolor'
  import 'tinymce/plugins/advlist'
  import 'tinymce/plugins/table'
  import 'tinymce/plugins/lists'
  import 'tinymce/plugins/paste'
  import 'tinymce/plugins/preview'
  import 'tinymce/plugins/fullscreen'
  import 'tinymce/plugins/code'
  import 'tinymce/plugins/imagetools'

  import fileManager from '@/views/sys/file/manager'
  export default {
    name: 'TinymceEditor',
    components: {
      editor: vueEditor,
      fileManager,
    },
    props: {
      value: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        publicPath: baseURL,
        tinymceFlag: 1,
        tinymceInit: {},
        myValue: this.value,
      }
    },
    watch: {
      value(newValue) {
        this.myValue = newValue
      },
      myValue(newValue) {
        this.$emit('input', newValue)
      },
    },
    created() {
      const that = this
      this.tinymceInit = {
        skin_url: '~@/assets/tinymce/skins/ui/oxide',
        content_css: '~@/assets/tinymce/skins/content/default',
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        height: 300,
        browser_spellcheck: true, // 拼写检查
        branding: false, // 去水印
        // elementpath: false,  //禁用编辑器底部的状态栏
        statusbar: false, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        menubar: true, // 隐藏最上方menu
        plugins: 'advlist table lists paste preview fullscreen code imagetools',
        toolbar:
          'undo redo | fontselect fontsizeselect forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify imageUpload h2 h3 table fullscreen | underline strikethrough | quicklink blockquote numlist bullist preview code',
        /**
         * 下面方法是为tinymce添加自定义插入图片按钮
         * 借助iview的Upload组件,将图片先上传到存储云上，再将图片的存储地址放入编辑器内容
         */
        setup: (editor) => {
          editor.ui.registry.addButton('imageUpload', {
            // text: '插入图片',
            tooltip: '插入图片',
            icon: 'image',
            onAction: () => {
              that.$refs.manager.handleOpen()
              //   const upload = that.$refs.imageUpload
              //   upload.handleClick()
            },
          })
        },
      }
    },
    activated() {
      this.tinymceFlag++
    },

    mounted() {},
    methods: {
      // 插入图片至编辑器
      insertImage(res, file) {
        const src = '' // 图片存储地址
        tinymce.execCommand('mceInsertContent', false, `<img src=${src}>`)
      },
      onComplete(m) {
        tinymce.execCommand(
          'mceInsertContent',
          false,
          `<img src=${baseURL + m.fileUrl}>`
        )
      },
    },
  }
</script>
<style>
  .tox-tinymce-aux {
    z-index: 2009 !important;
  }
</style>
